<script>
function drawRows (h, rows) {
  return rows.map((row) => {
    return h('el-row', {}, row.map((col) => {
      if (col.rows) {
        return h('el-col', {
          props: {
            span: col.col
          }
        }, drawRows(h, col.rows))
      }
      if (col.item.img) {
        return h('el-col', {
          style: {
            'text-align': 'center'
          },
          props: {
            span: col.col
          }
        }, [h('img', {
          attrs: {
            'object-fit': 'contain',
            src: col.item.value,
            ...col.item.img
          }
        })])
      }
      const text = col.label ? col.item.label : col.item.value
      const style = col.label ? 'label-col' : 'value-col'
      return h('el-col', {
        'class': style,
        props: {
          span: col.col
        }
      }, text)
    }))
  })
}

export default {
  functional: true,
  render (h, context) {
    const { props } = context

    let rows = []
    let stack = []
    let row = []
    let col = 24
    let height = 0

    rows.push(row)

    props.items.forEach((item) => {
      let panel = item.panel || {}
      // 标签宽度
      let labelCol = panel['label-col'] || 2
      if (labelCol > 24) labelCol = 12
      // 内容宽度
      let valueCol = panel.width || 4
      // 整体宽度
      let itemCol = labelCol + valueCol
      if (itemCol > 24) itemCol = 24

      // console.log('col=', col, ' label-col=', labelCol, ' value-col=', valueCol)
      // 高度
      let itemHeight = panel.height || 1
      col -= (itemHeight > 1) ? valueCol : itemCol

      // console.log('height=', height, ' col=', col, ' itemHeight=', itemHeight)

      if (col < 0) { // 新开一行
        // console.log('col < 0  => 开启新行')
        row = []
        // 弹栈
        if (height <= 0 && stack.length) {
          // console.log('height=', height, ' stack.length=', stack.length, ' =>弹栈')
          let cell = stack.pop()
          rows = cell.rows
          height = cell.height
        }
        rows.push(row)
        col = 24 - itemCol
        height -= 1
      }

      if (itemHeight <= 1) {
        // console.log('-------------------------------------------------------')
        row.push({ item, col: labelCol, label: true })
        row.push({ item, col: itemCol - labelCol, label: false })
        return
      }
      // 压栈
      // console.log('itemHeight=', itemHeight, ' =>结束当前行，压栈')
      stack.push({ rows, height: height + 1 - itemHeight })
      rows = []
      // 过去的row包裹了将来的rows
      row.push({ item, col: valueCol, text: item.value })
      row.push({ rows, col })
      row = []
      rows.push(row)
      col = 24
      height = itemHeight - 1
      // console.log('========================================================')
    })
    return h('el-card', {
      props: {
        shadow: 'always'
      }
    }, drawRows(h, rows))
  }
}
</script>
<style scoped>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
   margin-bottom: 0;
}
.label-col {
  //background-color: #67C23A;
  //color: #E9EEF3;
  text-align: right;
  padding-right: 5px;
  font-size: 12px;
}
.value-col {
  border-bottom: 1px solid #67C23A;
  text-align: center;
  font-family: '楷体', Arial, sans-serif;;
}
</style>
